<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
	<script src="/jquery-3.6.0.min.js"></script>
	<!--  -->
	<script>
		
		$(function(){
			// alert("jQuery调试!!!")
			/* 
				常用Ajax用法
				1.$.get(url地址，提交数据，回调函数，返回值类型)
				2.$.post（...）
			*/
		   $.get("/findAjaxUser",function(result){
			   // console.log(result)
			   
			  //  for (var i = 0; i < result.length; i++) {
					// var user = result[i];
					// console.log(user);
			  //  }
			  //使用in的关键字
			  // for ( index in result) {
					// var user = result[index];
					// console.log(user)
			  // }
			  //使用of关键字
			  for (user of result) {
					// console.log(user);
					var id = user.id;
					var name = user.name;
					var age = user.age;
					var sex = user.sex;
					var tr = " <tr align='center'><td>"+id+"</td> <td>"+name+"</td> <td>"+name+"</td><td>"+sex+"</td></tr>";
					
					$("#usertable").append(tr);
			  }
		   })
		   
		   // $.get("/findAjaxUser",'id=1&name=tom',function(result){
			  //  console.log("ajax请求成功");
		   // })
		   // console.log("对象结构的语法")
		   // $.get("/findAjaxUser",{id:1,name:'tom'},function(result){
		   // 			   console.log("ajax请求成功");
		   // })
		   // console.log("对象结构的语法")
		   // var obj = {
			  //  id:1,name:'tom'
		   // }
		   // $.get("/findAjaxUser",obj,function(result){
		   // 			   console.log("ajax请求成功");
		   // })
		   
		   // $.post('findAjaxUser',{id:110,name:'tomcat'},function(result){
			  //  console.log("postAjax请求成功");
		   // })
		   // $.getJSON('findAjaxUser',{id:110,name:'tomcat'},function(result){
		   // 			   console.log("getJSON请求成功");
		   // })
		   
		   //最为基本的ajax
		   		$.ajax({
		   			type:	"get",    				 //请求的类型
		   			url: 'findAjaxUser',	         //请求的路径
		   			data: {id:1,name:'tomcat猫'},	 //请求的参数
		   				//成功之后的回调函数
		   			success: function(result){		 //成功回调
		   				console.log("ajax请求成功!!!!")
		   			},
		   			error: function(result){		 //失败回调
		   				console.log("ajax请求失败")
		   			}
		   		})
            // var obj = {
		    //    id:110,
            //     name:'ffx'
            // }
            // $.get("/updateAjaxUser",obj,function(){
            //
            // })
		})
	</script>
</head>
<body>
    <h1>修改数据</h1>
    <div>
        <p>编号:</p>
        <p>姓名:</p>
        <p>年龄:</p>
        <p>性别:</p>
        <button>更新</button>
    </div>
    <hr />
    <table id="usertable" border="1px" width="1000px" align="center">
        <tr align="center">
            <td colspan="4" ><h3>用户列表</h3></td>
        </tr>
        <tr align="center">
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>

    </table>
</body>
</html>